<!--suppress HtmlDeprecatedAttribute -->
<template>
  <el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="搜索商品" width="60%"
              @open="dialogOpenBefore">
    <div class="title">
      <el-row :gutter="10">
        <el-col :span="6">
          <span style="border-left: 5px solid #409EFF; padding-left: 10px;">搜索条件</span>
        </el-col>
      </el-row>
    </div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="商品编号" prop="id" class="formItem">
            <el-input v-model="form['id']" placeholder="商品编号，回车进行搜索" size="small"
                      @keyup.enter.native="handleSearch"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品名称" prop="name" class="formItem">
            <el-input v-model="form['name']" placeholder="商品名称" size="small"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="店铺名称" prop="storeName" class="formItem">
            <el-input v-model="form['storeName']" placeholder="店铺名称" size="small"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品分组" prop="groupId" class="formItem">
            <el-cascader v-model="form.groupId" :options="groupList" :show-all-levels="false"
                         :props="groupCascaderProps" :disabled="groupLoading ? true : null"
                         :placeholder="groupLoading ? '加载中...' : '请选择'" size="small"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品分类" prop="goodCategoryId" class="formItem">
            <el-cascader v-model="form.goodCategoryId" :options="categoryList" :show-all-levels="false"
                         :props="categoryCascaderProps" :disabled="categoryLoading ? true : null"
                         :placeholder="categoryLoading ? '加载中...' : '请选择'" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态" prop="state" class="formItem">
            <el-input v-model="form['state']" placeholder="状态" size="small"/>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button @click="handleReset" size="small">重置</el-button>
          <el-button icon="el-icon-search" type="primary" :loading="queryLoading"
                      @click="handleSearch" size="small">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-row :gutter="10">
        <el-col :span="6">
          <span style="border-left: 5px solid #409EFF; padding-left: 10px;">搜索结果</span>
        </el-col>
      </el-row>
    </div>
    <el-table :data="searchData" ref="table" style="width: 100%" :border="false" max-height="180"
              v-loading='queryLoading' @current-change="handleSelectionChange" :highlight-current-row="true" >
      <el-table-column type="index" align="center" width="50" fixed="left"/>
      <el-table-column prop="id" align="center" label="商品编号" fixed="left"/>
      <el-table-column prop="name" align="center" label="商品名称"/>
      <el-table-column prop="storeName" align="center" label="店铺名称"/>
      <el-table-column prop="groupName" align="center" label="商品分组"/>
      <el-table-column prop="goodCategoryName" align="center" label="商品分类"/>
      <el-table-column prop="state" align="center" label="商品状态"/>
      <el-table-column prop="createUserName" align="center" label="创建人员"/>
      <el-table-column prop="createUserTime" align="center" label="创建时间"/>
      <el-table-column prop="remark" align="center" label="商品备注"/>
    </el-table>
    <el-row :gutter="10" style="margin-top: 10px;" v-if="searchData && searchData.length >= pageSize">
      <el-col :span="24" align="center">
        <span>数据过多，更多数据请更新查询条件</span>
      </el-col>
    </el-row>
    <span slot="footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleOk">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { queryGoodDetailByPageStore } from '@/api/ApiGoodDetail'
import PageDTO from '@/api/entity/PageDTO'
import GoodDetailQueryDTO from '@/api/entity/GoodDetailQueryDTO'
import { ResultCode } from '@/constants/constants'
import { queryTree } from '@/api/ApiSysGoodCategory'
import { queryGoodGroupTree } from '@/api/ApiGoodGroup'

export default {
  name: 'GoodSearchDialog',
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    data: {
      required: false,
      type: Object,
      default: () => { return {} }
    }
  },
  model: {
    prop: 'visible',
    event: 'visible'
  },
  data () {
    return {
      pageSize: 30,
      dialogVisible: false,
      queryLoading: false,
      form: {},
      searchData: [],
      selection: null,
      groupCascaderProps: {
        checkStrictly: true,
        expandTrigger: 'click',
        value: 'id',
        label: 'name',
        children: 'children',
        emitPath: false
      },
      categoryCascaderProps: {
        checkStrictly: true,
        expandTrigger: 'click',
        value: 'id',
        label: 'name',
        children: 'children',
        emitPath: false
      },
      categoryLoading: true,
      categoryList: [],
      groupLoading: true,
      groupList: []
    }
  },
  methods: {
    dialogOpenBefore () {
      this.resetDialog()
      this.form = this.data
    },
    /**
     * 重置对话框数据
     */
    resetDialog () {
      this.queryLoading = false
      this.form = {}
      this.searchData = []
      this.selection = null
    },
    /**
     * 关闭对话框
     */
    closeDialog () {
      this.dialogVisible = false
    },
    /**
     * 重置dialog数据
     */
    handleReset () {
      this.resetDialog()
    },
    /**
     * 搜索商品
     */
    handleSearch () {
      this.queryLoading = true
      const pageDTO = PageDTO.instance()
      pageDTO.setCurrent(1)
      pageDTO.setSize(this.pageSize)
      const wrapper = GoodDetailQueryDTO.instance()
      wrapper.addGoodId(this.form.id)
      wrapper.addGoodName(this.form.name)
      wrapper.addGroupId(this.form.groupId)
      wrapper.addGoodCategoryId(this.form.goodCategoryId)
      wrapper.addStoreName(this.form.storeName)
      wrapper.addGoodState(this.form.state)
      pageDTO.setCondition(wrapper)
      queryGoodDetailByPageStore(pageDTO, data => {
        if (data && data.code === ResultCode.OK) {
          data = data.object
          this.searchData = data['records']
        }
      }, () => {
        this.queryLoading = false
      })
    },
    /**
     * 选择商品
     */
    handleSelectionChange (val) {
      this.selection = val
    },
    /**
     * 确定选择商品
     */
    handleOk () {
      if (this.selection) {
        this.$emit('select', this.selection)
        this.dialogVisible = false
      }
    },
    dealWithCategory (node) {
      if (node) {
        Object.assign(node, node.node)
        if (node.children) {
          node.children.forEach(this.dealWithCategory)
        }
      }
    }
  },
  watch: {
    dialogVisible (val) {
      this.$emit('visible', val)
    },
    visible (val) {
      if (this.dialogVisible !== val) {
        this.dialogVisible = val
      }
    },
    data (val) {
      this.form = val
    }
  },
  mounted () {
    // 查询类别树
    queryTree(data => {
      const rootList = data.object.children
      rootList.forEach(this.dealWithCategory)
      this.categoryList = rootList
    }, () => {
      this.categoryLoading = false
    })
    // 查询店铺分组树
    queryGoodGroupTree(data => {
      const rootList = data.object.children
      rootList.forEach(this.dealWithCategory)
      this.groupList = rootList
    }, () => {
      this.groupLoading = false
    })
  }
}
</script>

<style scoped>
  .title{
    margin-bottom: 30px;
    margin-top: -10px;
  }

  .formItem{
    margin-top: -10px;
  }
</style>
